<template>
  <el-button @click="editTable">编辑表格</el-button>

  <vo-table :data="data.tableData" >
    <template v-slot:handleSlot="{row}">
      <el-button-group class="ml-4" style="display: inline-flex">
        <el-button text type="success" size="small" @click="editBtn(row)">编辑 </el-button>
        <el-button text type="danger" size="small" @click="delMenu(row)">删除</el-button>
      </el-button-group>
    </template>
  </vo-table>
</template>

<script setup>
  import {ref, onMounted, reactive} from 'vue';
  const data = reactive({
    tableData: {row: []}
  
  });

  data.tableData.cols = [
    {type: 'index', title: '序号'},
    {type: 'selection'},
    {title: '交换机名称1', key: 'id', align: 'left'},
    {title: '交换机类型2', key: 'area', align: 'left', edit: {editor: 'true', type: 'input', attrs: {}}},
    {title: '交换机类型3', key: 'name', align: 'left', edit: {editor: 'true', type: 'input', attrs: {}}},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
  data.tableData.data = [
    {
      id: '1',
      name: 'GFD科技有限公司',
      area: '1',
      address: '福州',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
    {
      id: '2',
      name: 'WWWW科技有限公司',
      area: '0',
      address: '深圳福田区',
      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
    },
  ];
</script>
<style lang="scss" scoped>
</style>
